import React, { useEffect, useState } from 'react';
import './LeftSelect.less';

interface PropsInter {
  className?: string;
  handleSelect: (data: any) => void;
}
export default function LeftSelect(props: PropsInter) {
  const [selectArr, setSelectArray] = useState([
    {
      name: '畜牧品种',
      id: 1,
      keyData: [{ name: '牧场养殖品种', key: 'name' }],
    },
    {
      name: '畜牧品种',
      id: 2,
      keyData: [
        { name: '牧场养殖品种2', key: 'name' },
        { name: '牧场养殖品种第二类目', key: 'test' },
      ],
    },
    {
      name: '牧场类型',
      id: 3,
      keyData: [
        { name: '牧场养殖品种2', key: 'name' },
        { name: '牧场养殖品种第二类目', key: 'test' },
      ],
    },
    {
      name: '牲畜来源',
      id: 4,
      keyData: [
        { name: '牲畜来源', key: 'name' },
        { name: '测试数据', key: 'test' },
      ],
    },
    {
      name: '出栏类型',
      id: 5,
      keyData: [{ name: '出栏类型', key: 'name' }],
    },
    {
      name: '免疫方案',
      id: 6,
      keyData: [{ name: '免疫方案', key: 'name' }],
    },
  ]);
  const [nowSelect, setNowSelect] = useState<any>({});
  const handleSelect = (data: any) => {
    setNowSelect(data);
    props.handleSelect(data);
  };
  useEffect(() => {
    // 1. 请求数据
    // 2. 设置默认值
    handleSelect(selectArr[0]);
  }, []);
  return (
    <div className={'left-select-wrapper ' + (props.className || '')}>
      {selectArr.map((item) => {
        const nowClassName = item?.id === nowSelect?.id ? 'active' : '';

        return (
          <div
            className={'left-select-item ' + nowClassName}
            key={item.id}
            onClick={() => handleSelect(item)}
          >
            {item.name}
          </div>
        );
      })}
    </div>
  );
}
